<template>
    <div class="login">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <h2 class="card-header-title">小海后台管理系统</h2>
                </div>
            </template>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="账号" prop="userName">
                    <el-input v-model="ruleForm.userName" :prefix-icon="Avatar" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="userPwd">
                    <el-input v-model="ruleForm.userPwd" show-password :prefix-icon="Key" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <div class="captcha">
                        <el-input v-model="ruleForm.captcha" class="w-40" placeholder="请输入验证码" />
                        <img :src="imgUrl" @click="changeCaptcha" alt="">
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        登陆
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="foot">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave"
                        d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                </g>
            </svg>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import router from '../router'
import api from '../api'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Avatar, Key } from '@element-plus/icons-vue'
import { useStore } from '../store/index'
const userPinia = useStore()//获取pinia实例


onMounted(() => {
    getcaptchaapi()
})
//验证码接口
const getcaptchaapi = () => {
    api.getCaptchaApi().then((res: any) => {
        console.log(res);
        imgUrl.value = res.data.imgurl
    })
}
//验证码图片地址
const imgUrl = ref('')
//点击切换验证码
const changeCaptcha = () => {
    getcaptchaapi()
}


//用于控制该表单域下组件的默认尺寸
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()//表单组件ref节点
// 用户输入信息
const ruleForm = reactive<IloginRuleForm>({
    userName: 'admin',
    userPwd: '123456',
    captcha: ''
})

//表单验证
const rules = reactive<FormRules<IloginRuleForm>>({
    userName: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 2, max: 10, message: '账号必须6到12位', trigger: 'blur' },
    ],
    userPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '密码至少6位', trigger: 'blur' },
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码必须4位', trigger: 'blur' },
        {
            validator: (_rule, value, callback) => {
                if (value === ruleForm.captcha) {
                    callback()
                } else {
                    callback(new Error('验证码不正确'))
                }
            }
        },
    ]
})

//登陆
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //调用登陆接口
            api.getLoginApi(ruleForm).then((res: any) => {
                if (res.code === 200) {
                    // 登陆成功，存储用户信息
                    userPinia.setUserInfo(res.data)
                    ElMessage.success('登陆成功')
                    // 跳转到首页
                    router.push('/welcome')
                }
            }).catch((err) => {
                console.log('请求登陆失败', err);
                ElMessage.error('账号密码或验证码错误')
            })
        } else {
            console.log('登陆失败!', fields)
        }
    })
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style scoped lang="less">
// .el-form{
//     min-width: 100px;
// }
.el-card {
    position: relative;
    z-index: 999;
}

.login {
    min-width: 100vw;
    min-height: 100vh;
    padding-top: 200px;
    box-sizing: border-box;
    background-color: #2646b1;
}

:deep(.el-card__header) {
    // height: 88px;0
    padding: 0 !important;
    text-align: center;
}

.captcha {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.card-header-title {
    font-size: 30px;
    font-weight: 700;
    padding: 20px 0;
}

.box-card {
    width: 500px;
    margin: auto;
}


.foot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    // height: 400px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
}

.waves {
    position: relative;
    width: 100%;
    // height: 500px;
    margin-bottom: -7px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 250px;
}

.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}

.content a {
    margin: 0 5px;
    font-size: 12px;
    color: #333;
}

.content a:hover {
    color: #000;
}

/* Animation */

.parallax>use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }

    h1 {
        font-size: 24px;
    }
}
</style>
